<template>
  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '120px'">


      <el-tabs v-model="activeName" >
        <el-tab-pane label="房间信息" name="first">
          <!-- <el-form-item label="楼盘id" prop="dictId">
              <el-input v-model="dataForm.dictId" placeholder="楼盘id"></el-input>
          </el-form-item> -->
              <!-- <el-form-item label="座栋id" prop="zdId">
              <el-input v-model="dataForm.zdId" placeholder="座栋id"></el-input>
          </el-form-item>
              <el-form-item label="单元Id" prop="dyId">
              <el-input v-model="dataForm.dyId" placeholder="单元Id"></el-input>
          </el-form-item> -->
              <el-form-item label="房间号" prop="num" disabled>
              <el-input v-model="dataForm.num" placeholder="房间号"></el-input>
          </el-form-item>
              <!-- <el-form-item label="层坐标" prop="storeyCoordinate">
              <el-input v-model="dataForm.storeyCoordinate" placeholder="层坐标"></el-input>
          </el-form-item>
              <el-form-item label="户坐标" prop="roomCoordinate">
              <el-input v-model="dataForm.roomCoordinate" placeholder="户坐标"></el-input>
          </el-form-item>
              <el-form-item label="房间数" prop="roomNum">
              <el-input v-model="dataForm.roomNum" placeholder="房间数"></el-input>
          </el-form-item>
              <el-form-item label="是否为合并房" prop="merge">
              <el-input v-model="dataForm.merge" placeholder="是否为合并房"></el-input>
          </el-form-item> -->
              <el-form-item label="室" prop="apartmentS">
              <el-input v-model="dataForm.apartmentS" placeholder="室"></el-input>
          </el-form-item>
              <el-form-item label="厅" prop="apartmentT">
              <el-input v-model="dataForm.apartmentT" placeholder="厅"></el-input>
          </el-form-item>
              <el-form-item label="卫" prop="apartmentW">
              <el-input v-model="dataForm.apartmentW" placeholder="卫"></el-input>
          </el-form-item>
              <el-form-item label="房屋现状" prop="situation" disabled>
              <el-input v-model="dataForm.situation" placeholder="房屋现状"></el-input>
          </el-form-item>
              <el-form-item label="面积" prop="area">
              <el-input v-model="dataForm.area" placeholder="面积"></el-input>
          </el-form-item>
              <el-form-item label="出租价格" prop="leasePrice">
              <el-input v-model="dataForm.leasePrice" placeholder="出租价格"></el-input>
          </el-form-item>
              <el-form-item label="出租总价" prop="leasePrices">
              <el-input v-model="dataForm.leasePrices" placeholder="出租总价"></el-input>
          </el-form-item>
              <el-form-item label="出售价格" prop="sellPrice">
              <el-input v-model="dataForm.sellPrice" placeholder="出售价格"></el-input>
          </el-form-item>
              <el-form-item label="出售总价" prop="sellPrices">
              <el-input v-model="dataForm.sellPrices" placeholder="出售总价"></el-input>
          </el-form-item>
              <el-form-item label="装修情况" prop="renovation">
                <!-- dictRenovation -->
                <ren-select
                v-model="dataForm.renovation"
                dict-type="dictRenovation"
                placeholder="装修情况"
                style="width:100%"
              ></ren-select>
              <!-- <el-input v-model="dataForm.renovation" placeholder="装修情况"></el-input> -->
          </el-form-item>
              <el-form-item label="房屋朝向" prop="direction">
                <!-- dictDirection -->
                <ren-select
                v-model="dataForm.direction"
                dict-type="dictDirection"
                placeholder="房屋朝向"
                style="width:100%"
              ></ren-select>
              <!-- <el-input v-model="dataForm.direction" placeholder="房屋朝向"></el-input> -->
          </el-form-item>
              <el-form-item label="产权证" prop="titleDeed">
              <el-input v-model="dataForm.titleDeed" placeholder="产权证"></el-input>
          </el-form-item>
              <el-form-item label="佣金" prop="commission">
              <el-input v-model="dataForm.commission" placeholder="佣金"></el-input>
          </el-form-item>
            <el-form-item label="看房方式" prop="lookMode">
            <ren-select
                v-model="dataForm.lookMode"
                dict-type="dictLookMode"
                placeholder="看房方式"
                style="width:100%"
              ></ren-select>
            </el-form-item>
            <el-form-item label="配置" prop="conf">
              <!-- {{$getDictDataList("dictConf")}} -->
                <el-checkbox-group v-model="confList" @change='confListChange'>
                  <el-checkbox :label="item.dictValue" v-for="(item,index) in $getDictDataList('dictConf')" :key='index'>{{item.dictLabel}}</el-checkbox>
                </el-checkbox-group>
          <!-- <el-input v-model="dataForm.conf" placeholder="配置"></el-input> -->
          </el-form-item>

        </el-tab-pane>

        <el-tab-pane label="业主信息" name="second">
          <el-form-item label="业主姓名" prop="ownerName">
              <el-input v-model="dataForm.ownerName" placeholder="业主姓名"></el-input>
          </el-form-item>
              <el-form-item label="业主电话1" prop="ownerPhone1">
              <el-input v-model="dataForm.ownerPhone1" placeholder="业主电话1"></el-input>
          </el-form-item>
              <el-form-item label="业主电话2" prop="ownerPhone2">
              <el-input v-model="dataForm.ownerPhone2" placeholder="业主电话2"></el-input>
          </el-form-item>
              <el-form-item label="委托人姓名" prop="ownerClientName">
              <el-input v-model="dataForm.ownerClientName" placeholder="委托人姓名"></el-input>
          </el-form-item>
              <el-form-item label="委托人电话" prop="ownerClientPhone">
              <el-input v-model="dataForm.ownerClientPhone" placeholder="委托人电话"></el-input>
          </el-form-item>
              <el-form-item label="业主公司名字" prop="ownerCompanyName">
              <el-input v-model="dataForm.ownerCompanyName" placeholder="业主公司名字"></el-input>
          </el-form-item>
              <el-form-item label="业主公司电话" prop="ownerCompanyPhone">
              <el-input v-model="dataForm.ownerCompanyPhone" placeholder="业主公司电话"></el-input>
          </el-form-item>
              <el-form-item label="包租名字" prop="ownerLeaseName">
              <el-input v-model="dataForm.ownerLeaseName" placeholder="包租名字"></el-input>
          </el-form-item>
              <el-form-item label="包租电话" prop="ownerLeasePhone">
              <el-input v-model="dataForm.ownerLeasePhone" placeholder="包租电话"></el-input>
          </el-form-item>
              <el-form-item label="业主职业" prop="ownerOccupation">
              <el-input v-model="dataForm.ownerOccupation" placeholder="业主职业"></el-input>
          </el-form-item>
              <el-form-item label="购房方式" prop="ownerBuy">
              <el-input v-model="dataForm.ownerBuy" placeholder="购房方式"></el-input>
          </el-form-item>
              <el-form-item label="贷款金额" prop="ownerBuyPrice">
              <el-input v-model="dataForm.ownerBuyPrice" placeholder="贷款金额"></el-input>
          </el-form-item>
              <el-form-item label="贷款银行" prop="ownerBuyBank">
              <el-input v-model="dataForm.ownerBuyBank" placeholder="贷款银行"></el-input>
          </el-form-item>
              <el-form-item label="是否有发票" prop="ownerBuyBill">
              <el-input v-model="dataForm.ownerBuyBill" placeholder="是否有发票"></el-input>
          </el-form-item>

        </el-tab-pane>

        <el-tab-pane label="租户信息" name="third">
              <el-form-item label="租户公司" prop="tenantCompanyName">
              <el-input v-model="dataForm.tenantCompanyName" placeholder="租户公司"></el-input>
          </el-form-item>
              <el-form-item label="租户行业" prop="tenantOccupation">
              <el-input v-model="dataForm.tenantOccupation" placeholder="租户行业"></el-input>
          </el-form-item>
              <el-form-item label="租户姓名" prop="tenantName">
              <el-input v-model="dataForm.tenantName" placeholder="租户姓名"></el-input>
          </el-form-item>
              <el-form-item label="租户电话" prop="tenantPhone">
              <el-input v-model="dataForm.tenantPhone" placeholder="租户电话"></el-input>
          </el-form-item>
              <el-form-item label="租户委托人" prop="tenanClientName">
              <el-input v-model="dataForm.tenanClientName" placeholder="租户委托人"></el-input>
          </el-form-item>
              <el-form-item label="租户委托人电话" prop="tenanClientPhone">
              <el-input v-model="dataForm.tenanClientPhone" placeholder="租户委托人电话"></el-input>
          </el-form-item>
              <el-form-item label="租期" prop="tenanTime">
              <el-input v-model="dataForm.tenanTime" placeholder="租期"></el-input>
          </el-form-item>
              <el-form-item label="租金" prop="tenanPrice">
              <el-input v-model="dataForm.tenanPrice" placeholder="租金"></el-input>
          </el-form-item>
              <el-form-item label="付款方式" prop="tenanPay">
              <el-input v-model="dataForm.tenanPay" placeholder="付款方式"></el-input>
          </el-form-item>
              <el-form-item label="免租期" prop="tenanFreeTime">
              <el-input v-model="dataForm.tenanFreeTime" placeholder="免租期"></el-input>
          </el-form-item>
              <el-form-item label="合同年限" prop="tenanContractTime">
              <el-input v-model="dataForm.tenanContractTime" placeholder="合同年限"></el-input>
          </el-form-item>
          <!-- <el-form-item label="状态 0默认" prop="state">
              <ren-select
                      v-model="dataForm.state"
                      dict-type="dictSituation"
                      placeholder="状态"
                      style="width:100%"
                  ></ren-select>
          </el-form-item> -->
          <!-- <el-form-item label="删除标识" prop="deleteFlag">
              <el-radio-group v-model="dataForm.deleteFlag">
                <el-radio label="0">删除</el-radio>
                <el-radio label="1">正常</el-radio>
              </el-radio-group>
          </el-form-item>
                  <el-form-item label="修改人" prop="updater">
              <el-input v-model="dataForm.updater" placeholder="修改人"></el-input>
          </el-form-item>
              <el-form-item label="修改时间" prop="updateDate">
              <el-input v-model="dataForm.updateDate" placeholder="修改时间"></el-input>
          </el-form-item> -->

        </el-tab-pane>
      </el-tabs>
      </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: '',
        dictId: '',
        zdId: '',
        dyId: '',
        num: '',
        storeyCoordinate: '',
        roomCoordinate: '',
        roomNum: '',
        merge: '',
        apartmentS: '',
        apartmentT: '',
        apartmentW: '',
        situation: '',
        area: '',
        leasePrice: '',
        leasePrices: '',
        sellPrice: '',
        sellPrices: '',
        renovation: '',
        direction: '',
        titleDeed: '',
        commission: '',
        lookMode: '',
        conf: [],
        ownerName: '',
        ownerPhone1: '',
        ownerPhone2: '',
        ownerClientName: '',
        ownerClientPhone: '',
        ownerCompanyName: '',
        ownerCompanyPhone: '',
        ownerLeaseName: '',
        ownerLeasePhone: '',
        ownerOccupation: '',
        ownerBuy: '',
        ownerBuyPrice: '',
        ownerBuyBank: '',
        ownerBuyBill: '',
        tenantCompanyName: '',
        tenantOccupation: '',
        tenantName: '',
        tenantPhone: '',
        tenanClientName: '',
        tenanClientPhone: '',
        tenanTime: '',
        tenanPrice: '',
        tenanPay: '',
        tenanFreeTime: '',
        tenanContractTime: '',
        state: '',
        deleteFlag: '',
        creator: '',
        createDate: '',
        updater: '',
        updateDate: ''
      },
      activeName:'first',
      confList:[],
    }
  },
  
  computed: {
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/dictionary/dictmajorfj/${this.dataForm.id}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        
        if(res.data.conf){
          this.confList=res.data.conf.split(",");
        }else{
          this.confList=[]
        }
        this.dataForm = {
          ...this.dataForm,
          ...res.data
        }
        // 
      }).catch(() => {})
    },
    confListChange(list){
      this.dataForm.conf=list.join()
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$http[!this.dataForm.id ? 'post' : 'put']('/dictionary/dictmajorfj/', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style scoped lang="scss">
  .el-dialog__body{
    padding: 30px 60px !important;
  }
</style>